<template>
	<view class="sys-wrap">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				<view class="nav-title">设置</view>
				<view style="width: 36rpx; height: 36rpx;"></view>
			</view>
		</view>
		<view class="place"></view>
		<view class="content-wrap">
			<view class="item notice" @click="toNotice()">
				<img src="static/imgs/setting/notice.png" alt="" />
				{{ $t("站内公告") }}
			</view>
			<view class="item setting notice" @click="toSafety()">
				<img src="static/imgs/setting/safety.png" alt="" />
				{{ $t("安全设置") }}
			</view>
			<view class="item" @click="toLang()">
				<img src="static/imgs/setting/lang.png" alt="" />
				{{ $t("语言切换") }}
			</view>
		</view>
		<view class="logout-wrap" @click="logout()"> {{ $t("退出登录") }} </view>
		<u-picker :cancelText="$t('取消')" :confirmText="$t('确定')" :show="show" :columns="list" itemHeight="80"
			@confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [
					["中文", "English", "日本語", "한국어"]
				],
				langList: ["CN", "EN", "JA", "KO"],
			};
		},
		// computed: {
		//   list() {
		//     return [
		//       [this.$t("中文"), this.$t("英语"), this.$t("日语"), this.$t("韩语")],
		//     ];
		//   },
		// },
		methods: {
			toNotice() {
				uni.navigateTo({
					url: "/pages/index/notice",
				});
			},

			toSafety() {
				uni.navigateTo({
					url: "/pages/set/safety",
				});
			},
			toLang() {
				this.show = true;
			},
			cancel() {
				this.show = false;
			},
			confirm(e) {
				if (e) {
					this.$i18n.locale = this.langList[e.indexs];
					uni.setStorageSync("lang", this.langList[e.indexs]);
					this.switchTabLang();
				}
				this.show = false;
			},
			logout() {
				this.$http.post(`/front/logout`).then((res) => {
					console.log(res);

					if (res.code === 0) {
						uni.removeStorageSync("token");
					}
				});
				uni.navigateTo({
					url: "/pages/login/login",
				});
			},
			backFun(){
				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style lang="scss">
	.sys-wrap {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;
		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}
		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
			.status {
				width: 100%;
				height: var(--status-bar-height);
			}
			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}

		.content-wrap {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				height: 92rpx;
				border-radius: 20rpx;
				font-size: $uni-font-size-32;
				margin-bottom: 30rpx;
				color: #333;
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				img {
					width: 52rpx;
					height: 52rpx;
					margin-right: 25rpx;
				}
			}
		}

		.logout-wrap {
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: $uni-content-bg-color;
			border-radius: 20rpx;
			background: #E4E4E4;
			border-radius: 16rpx;
			font-size: $uni-font-size-30;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333;
			text-align: center;
			position: fixed;
			left: 50%;
			bottom: 60rpx;
			transform: translateX(-50%);
		}
	}
</style>